<template>
  <el-container style="width: 100%;">
    <el-header style="height: 47px;">
      <p>车辆详细流水列表</p>
    </el-header>
    <el-main>
      <el-row class="btnGroup">
        <el-button class="twoBtn"><span>导出</span>
          <i class="el-icon-download"></i>
        </el-button>
        <!-- <el-button hidden="true" @click="getDetail">取证明细</el-button>-->
      </el-row>
      <el-table
        :data="dataTable.list"
        style="width:100%;"
        height="600"
        ref="multipleTable"
        tooltip-effect="dark"
        v-loading="loading"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column fixed sortable prop="account" label="流水号" width="180"></el-table-column>
        <el-table-column sortable prop="typename" label="数据类型" width="150"></el-table-column>
        <el-table-column sortable prop="inorgname" label="入场收费单位" width="150"></el-table-column>
        <el-table-column sortable prop="parkname" label="停车场" width="150"></el-table-column>
        <el-table-column sortable prop="chargeunitname" label="收费路段" width="150"></el-table-column>
        <el-table-column sortable prop="placeno" label="泊位编号" width="150"></el-table-column>
        <el-table-column sortable prop="carno" label="车牌号" width="150"></el-table-column>
        <el-table-column sortable prop="cartypename" label="车辆类型" width="150"></el-table-column>
        <el-table-column sortable prop="inusername" label="入场收费员" width="150"></el-table-column>
        <el-table-column sortable prop="intime" label="入场取证时间" width="180"></el-table-column>
        <el-table-column sortable prop="should" label="应收金额" width="150"></el-table-column>
        <el-table-column sortable prop="real" label="出场收费金额" width="150"></el-table-column>
        <el-table-column sortable prop="escape" label="未确认费用金额" width="150"></el-table-column>
        <el-table-column sortable prop="outorgname" label="出场收费单位" width="150"></el-table-column>
        <el-table-column sortable prop="outusername" label="出场收费员" width="150"></el-table-column>
        <el-table-column sortable prop="outtime" label="最后取证时间" width="180"></el-table-column>
        <el-table-column sortable prop="handletime" label="出场操作时间" width="180"></el-table-column>
        <el-table-column sortable prop="outtypename" label="出场类型" width="150"></el-table-column>
        <el-table-column sortable prop="repayflagname" label="补缴状态" width="150"></el-table-column>
        <el-table-column sortable prop="repaytime" label="补缴时间" width="180"></el-table-column>
        <el-table-column sortable prop="repaypaytype" label="补缴方式" width="150"></el-table-column>
        <el-table-column sortable prop="repaypaytypename" label="补缴收费员" width="150"></el-table-column>
        <el-table-column fixed="right" align="center" width="100" label="操作">
          <template slot-scope="scope">
              <span class="btnGroup">
            <el-button class="fourBtn" style=" margin-bottom: 0px"
                       @click="handleCommand(scope.row)"><span>取证明细</span><i class="el-icon-picture"></i>
            </el-button>
            </span>
            <!--<el-dropdown trigger="click" @command="handleCommand">-->
            <!--<el-button class="downBtn" @click="changeRow(scope.row)">-->
            <!--<i class="el-icon-arrow-down"></i>-->
            <!--</el-button>-->
            <!--<el-dropdown-menu slot="dropdown">-->
            <!--<el-dropdown-item command="detail">取证明细</el-dropdown-item>-->
            <!--</el-dropdown-menu>-->
            <!--</el-dropdown>-->
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        layout="total,sizes,prev,pager,next,jumper"
        :total="dataTable.count"
        :page-sizes="[10,20,30,50]"
        :page-size="dataTable.pageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        style="margin-top: 16px;"
      ></el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'parking-flow-table',
    props: ['loading', 'dataTable'],
    data() {
      return {
        changeVal: '',
        tableData: [],
        multipleTable: []
      }
    },
    methods: {
      handleSelectionChange: function (val) {
        this.multipleTable = val
      },
      handleCurrentChange: function (val) {
        this.$emit('page_num', val)
      },
      handleSizeChange(val) {
        this.$emit('sizePage', val)
      },
      handleCommand(val) {
        this.changeVal = val
        this.$emit('detailboolean', [this.changeVal, true])
      }
    }
  }
</script>

<style scoped>
  .el-dropdown {
    width: 33px;
    height: 19px;
  }

  .el-dropdown > .el-button {
    width: 33px;
    height: 19px;
    padding: 3px 9px;
  }

  .el-main {
    padding: 0;
    margin-top: 24px;
    margin-left: 24px;
  }

  .el-header p {
    font-family: MicrosoftYaHei;
    font-size: 13px;
    margin-top: 22px;
    color: #7F8CA6;
  }

  .el-header {
    padding: 0;
    margin-left: 24px;
    margin-right: 24px;
    border-bottom: 1px solid #E1E1E1;
  }

  .btnGroup {
  }

  .btnGroup > .twoBtn {
    width: 64px;
    height: 24px;
    padding: 4px 20px;
    border: 1px solid #409eff;
    font-family: MicrosoftYaHei;
    color: #fff;
    font-size: 12px;
  }
  .btnGroup > .fourBtn {
    width: 64px;
    height:24px;
    padding: 4px 8px;
    border: 1px solid #409eff;
    font-family: MicrosoftYaHei;
    color: #fff;
    font-size: 12px;
  }

  .btnGroup > .el-button span {
    display: none;
  }

  .btnGroup > .el-button:hover {
    background-color: #409EFF;
  }

  .btnGroup > .el-button:hover span {
    display: block;
  }

  .btnGroup > .el-button:hover i {
    display: none;
  }

  .el-button i {
    color: #409eff;
  }

  .el-footer {
    text-align: right;
  }
</style>
